<template>
  <div>
    <div class="order-date">
      <div class="span">请选择预约日期</div>
      <div>
        <el-radio-group v-model="radio1" @change="selectDate">
          <el-radio-button
            :label="item.name"
            v-for="(item, index) in dateList"
            :key="index"
          >
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="order-date">
      <div class="span">请选择预约时间</div>
      <span class="span"></span>
      <div class="time">
        <el-time-select
          placeholder="起始时间"
          v-model="startTime"
          :picker-options="{
            start: '08:00',
            step: '01:00',
            end: '22:00'
          }"
          @change="selectStartTime"
        >
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime"
          :picker-options="{
            start: '09:00',
            step: '01:00',
            end: '22:00',
            minTime: startTime
          }"
          @change="selectEndTime"
        >
        </el-time-select>
      </div>
    </div>

    <div class="order-date">
      <div class="span">请选择预约楼层及座位</div>
      <div>
        <el-radio-group v-model="radio2" @change="selectFloor">
          <el-radio-button label="图书馆-202"></el-radio-button>
          <el-radio-button label="图书馆-302"></el-radio-button>
          <el-radio-button label="图书馆-402"></el-radio-button>
        </el-radio-group>
        <div class="space">
          <el-radio-group v-model="radio3" @change="quChange">
            <!-- <el-button type="primary" plain>1</el-button> -->
            <el-radio-button
              v-for="(item, index) in 8"
              :key="index"
              :label="index + 1"
              @change="showtable(index + 1)"
            ></el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="seat">
      <seat @selectSeatValue="parentSeatValue" :floor="selectFloorValue" :Qu="selectQuValue" :Date="selectDateValue" :startTime="startAndEnd_Time.startTime" :endTime="startAndEnd_Time.endTime" ref="myseat"></seat>
    </div>
    <div>
      <div class="infor">
        <span class="information">我的名字</span>
        <div>
          <el-input v-model="myName" placeholder=""></el-input>
        </div>
      </div>
      <div class="infor">
        <span class="information">联系电话</span>
        <!-- <div> -->
        <el-input v-model="numPhone" placeholder=""></el-input>
        <!-- </div> -->
      </div>
    </div>
    <div>
      <el-button class="login-bt" type="danger" round @click="sureOder"
        >确定预约</el-button
      >
      <el-button class="login-bt" type="primary" round @click="toIndex"
        >返回首页</el-button
      >
    </div>
  </div>
</template>
<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.order-date {
  margin-top: 30px;
  margin-bottom: 20px;
}
.span {
  margin: 0 auto;
  width: 55%;
  margin-bottom: 0.5rem;
}
.infor {
  width: 100%;
  float: left;
  margin: 0 auto;
}
.information {
  display: block;
  margin: 0.5rem auto;
}
.login-bt {
  margin-top: 0.5rem;
}
.time {
  /* position: absolute; */
  display: block;
}
p {
  /* display: inline-block; */
  float: left;
  left: 1rem;
  width: 10%;
}
.space {
  margin-top: 0.5rem;
}
.seat {
  width: 40%;
  margin: 0 auto;
}
</style>
<script>
import { post, get } from "@/utils/request";

import seat from "../../components/seat.vue";
export default {
  components: { seat },
  // methods: {
  //   SeattoMy() {
  //     this.$router.replace("/seatpic");
  //     console.log("..");
  //   },
  // },
  data() {
    return {
      dateList: [
        {
          id: 1,
          name: "4-20 星期二"
        },
        {
          id: 2,
          name: "4-21 星期三"
        },
        {
          id: 3,
          name: "4-22 星期四"
        }
      ],

      radio1: "",
      radio2: "",
      radio3: "",

      startTime: "",
      endTime: "",

      input1: "",
      input2: "",
      input3: "",
      select: "",
      selectDateValue: "4-20 星期二", //选择日期
      startAndEnd_Time: {
        //选择时间
        startTime: "",
        endTime: ""
      },
      selectFloorValue: "图书馆-202", //选择楼层
      selectQuValue: "1", //选择区号
      selectSeatValue: "", //选择座位
      numPhone: "",
      myName: "",
      Time: ""
    };
  },
  methods: {
    quChange(value) {
      this.selectQuValue = value;
      this.$refs.myseat.getBookInfo();
      this.selectQuValue = this.selectQuValue+''

    },
    selectDate(value) {
      this.selectDateValue = value;
      console.log(this.selectDateValue);
    },
    selectFloor(value) {
      this.selectFloorValue = value;
    },
    dealwithDate() {
      var obj = new Date();
      let day = obj.getDay();
      this.dateList[0].name = this.GetDateStr(0);
      this.dateList[1].name = this.GetDateStr(1);
      this.dateList[2].name = this.GetDateStr(2);

      console.log(this.GetDateStr(1));
    },
    /**
     * 描述：选择开始与结束时间
     * 返回：startAndEnd_Time.startTime
     */
    selectStartTime(value) {
      this.startAndEnd_Time.startTime = value;
    },
    selectEndTime(value) {
      this.startAndEnd_Time.endTime = value;
    },
    dealwithTime() {
      this.Time = (
        this.startAndEnd_Time.startTime +
        "-" +
        this.startAndEnd_Time.endTime
      ).toString();
    },
    toIndex() {
      this.$router.replace({
        path: "/"
      });
    },
    GetDateStr(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      var m = dd.getMonth() + 1; //获取当前月份的日期
      var d = dd.getDate();
      var y = dd.getDay();
      var str = "";
      switch (y) {
        case 0:
          str += "日";
          break;
        case 1:
          str += "一";
          break;
        case 2:
          str += "二";
          break;
        case 3:
          str += "三";
          break;
        case 4:
          str += "四";
          break;
        case 5:
          str += "五";
          break;
        case 6:
          str += "六";
          break;
      }
      if (m >= 1 && m <= 9) {
        m = "0" + m;
      }
      if (d >= 0 && d <= 9) {
        d = "0" + d;
      }

      return m + "-" + d + "-星期" + str;
    },

    showtable(index) {
      this.$refs.myseat.getBookInfo();
      console.log("suce")
    },
    /**
     * 描述：确定预约
     */
    sureOder() {
      //用户已登录
      console.log(this.startAndEnd_Time);
      this.dealwithTime();
      this.selectDateValue = this.selectDateValue.toString();
      this.selectFloorValue = this.selectFloorValue.toString();
      this.selectQuValue = this.selectQuValue.toString();
      this.selectSeatValue = this.selectSeatValue.toString();
      this.myName = this.myName.toString();
      this.numPhone = this.numPhone.toString();
      this.Time = this.Time.toString();
      let allInfo = {
        oderdate: this.selectDateValue,
        odertime: this.Time,
        oderfloor: this.selectFloorValue,
        oderqu: this.selectQuValue,
        oderseat: this.selectSeatValue,
        odermyname: this.myName,
        odernumphone: this.numPhone,
        bookStatus: "1"
      };
      let url = "http://120.77.41.127:8080/bookInfo/saveOrUpdate";
      post(url, allInfo).then(resp => {
        // 提示
        this.$message({ type: "success", message: "预约成功！" });
      });
      console.log(allInfo);
      /* this.$message({
        message: "预约成功!",
        type: "success",
      }); */
      this.$router.replace({
        path: "/"
      });
    },
    parentSeatValue(value) {
      this.selectSeatValue = value;
    }
  },
  mounted() {
    this.dealwithDate();
  }
};
</script>